<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>猫眼后台管理系统</title>
    <link rel="stylesheet" href="../../layui/css/layui.css">
    <style>
        #btn{
        padding: 0 10px;
        margin-left: 10px;
    }
    #form{
        padding: 10px;
    }
    #input{
        width: 300px;
        margin-left: 10px;
    }
    #divone{
        display: flex;
    }
    </style>
</head>

<body class="layui-layout-body">
    <form class="layui-form" action="" id="form">
        <div class="layui-form-item" id="divone">
            <button class="layui-btn" id="btn">
                <a href="./AddArticle.html">添加文章</a>
            </button>
            <input type="text" name="key" required lay-verify="required" placeholder="关键字查询" autocomplete="off" class="layui-input"
                id="input">
            <a href="#" class="layui-btn" lay-filter="formDemo" id="icon">
                <i class="layui-icon-search layui-icon">
                </i>
            </a>

            <!-- </button> -->
            <div class="layui-table-tool-self">
                <div class="layui-inline" title="筛选列" lay-event="LAYTABLE_COLS"><i class="layui-icon layui-icon-cols"></i></div>
                <div class="layui-inline" title="导出" lay-event="LAYTABLE_EXPORT"><i class="layui-icon layui-icon-export"></i></div>
                <div class="layui-inline" title="打印" lay-event="LAYTABLE_PRINT"><i class="layui-icon layui-icon-print"></i></div>
            </div>
        </div>
    </form>
    <!-- 内容主体区域 -->
    <table id="showArticle"></table>
    <script src="../../layui/layui.js"></script>
    <script src="../../js/jquery-1.12.4.min.js"></script>
    <script>
        // JavaScript代码区域
        layui.use(['element', 'table'], function () {
            const table = layui.table;
            table.render({
                elem: "#showArticle",
                page: true,
                url: '/api/Article',
                cols: [
                    [{
                        field: 'title',
                        title: '文章标题'
                    }, {
                        field: 'description',
                        title: '文章描述'
                    }, {
                        field: 'publishDate',
                        title: '发布日期',
                        sort: true,
                        templet: `<div onclick="dateFormat('{{d.publishDate}}',"yyyy-mm-dd")"></div>`
                    }, {
                        title: '操作',
                        templet: `<div>
                                    <div class="layui-btn-group">
                                            <button class="layui-btn layui-btn-sm" onclick="upArticle('{{d._id}}')">
                                              <i class="layui-icon">&#xe642;</i>
                                            </button>  
                                            <button class="layui-btn layui-btn-sm layui-btn-radius layui-btn-danger" onclick="delArticle('{{d._id}}',this)">
                                              <i class="layui-icon">&#xe640;</i>
                                            </button>
                                    </div>
                                  </div>`
                    }]
                ],
            })
        });

        // 传入时间对象转为自己想要的格式显示
        function dateFormat(date = new Date(), format = "y-m-d h:i:s") {
            if (typeof date == "string") {
                date = new Date(date);
            }
            const y = date.getFullYear(),
                m = _.padStart(date.getMonth() + 1, 2, "0"),
                d = _.padStart(date.getDate(), 2, "0"),
                h = _.padStart(date.getHours(), 2, "0"),
                i = _.padStart(date.getMinutes(), 2, "0"),
                s = _.padStart(date.getSeconds(), 2, "0")
            return format.replace("y", y).replace("m", m).replace("d", d).replace("h", h).replace("i", i).replace("s",
                s);
        }

        $("#icon").click(async () => {
            // 得到输入框里的值
            layui.table.reload("showArticle", {
                where: {
                    key: $("#input").val()
                }
            });
        })

        // 修改文章
        function upArticle(id) {
            //    console.log(id);
            location.href = "UpArticle.html?id=" + id;
        }

        // 添加文章
        function delArticle(id, button) {
            $.ajax({
                url: "/api/Article/" + id,
                method: "delete",
                success: function (data) {
                    layer.msg('删除文章成功', {
                        icon: 1,
                        time: 1000
                    }, function () {
                        $(button).parents("tr").remove();
                    });
                }
            })
        }
    </script>
</body>

</html>